<template>
    <el-popover v-model="visible" placement="top" :width="800" @show="onPopoverShow" @hide="onPopoverHide">
        <template slot="reference">
            <el-input placeholder="选择" v-model="text">
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </template>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>选择供应商</span>
            </div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="ID" prop="id">
                </el-table-column>
                <el-table-column label="供应商名称" prop="name">
                </el-table-column>
                <el-table-column label="联系人名称" prop="contactName">
                </el-table-column>
                <el-table-column label="联系方式" prop="contactPhone">
                </el-table-column>
                <el-table-column align="right" width="200">
                    <template slot="header" slot-scope="scope">
                        <el-input placeholder="输入关键字搜索" size="mini" v-model="query.name" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="searchFun"></el-button>
                        </el-input>
                    </template>
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleSelect(scope.$index, scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <pagination v-show="total > 0" :total="total" :page.sync="query.pageNo" :limit.sync="query.pageSize"
                @pagination="getList" />
        </el-card>
    </el-popover>

</template>

<script>
import { listSupplier } from '@/api/archives/materialSupplier';
export default {
    name: 'SupplierSelect',
    prop: {
        value: {
            type: Number | String,
            default: () => {
                return ''
            }
        },
        name: {
            type: String,
            default: () => {
                return ''
            }
        },
    },
    data() {
        return {
            visible: false,
            tableData: [],
            search: '',
            total: 0,
            query: {
                pageNo: 1,
                pageSize: 10,
                name: ''
            },
            selectedRow: null
        }
    },
    created() {
        this.getList();
    },
    computed: {
        text() {
            return this.selectedRow ? `${this.selectedRow.name}` : undefined
        },
    },
    methods: {
        clearForm() {
            this.selectedRow = null;
            this.query.name = '';
        },
        searchFun() {
            this.query.pageNo = 1;
            this.getList();
        },
        async getList() {
            const res = await listSupplier(this.query);
            this.tableData = res.rows;
            this.total = res.total;
        },
        open() {
            this.visible = true;
        },
        handleSelect(index, row) {
            console.log(index, row);
            this.selectedRow = row;
            this.$emit('selected', row)
            this.visible = false;
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        setVal(data) {
            console.log("=======================进来啦");
            this.selectedRow = data
        },
        onPopoverShow() {
            setTimeout(() => {
                document.addEventListener('click', this.handleDocumentClick)
            }, 0)
        },
        onPopoverHide() {
            document.removeEventListener('click', this.handleDocumentClick)
        },
        handleDocumentClick(event) {
            this.visible = false
        }
    },
}
</script>